<AnimatedContainer data-test-related-resources-list class="w-full">
  <div {{did-insert this.enableAnimation}}>
    {{#if this.listIsEmpty}}
      <Document::Sidebar::EmptyStateAddButton
        @isReadOnly={{@editingIsDisabled}}
        @action={{this.showModal}}
        data-test-related-resources-list-empty-state
      />
    {{else}}
      <ul class="related-resources-list" ...attributes>
        {{#animated-each
          @items
          rules=this.transitionRules
          initialInsertion=true
          finalRemoval=true
          as |resource i|
        }}
          {{#if @itemLimit}}
            {{#if (lt i @itemLimit)}}
              {{yield resource to="resource"}}
            {{/if}}
          {{else}}
            {{yield resource to="resource"}}
          {{/if}}
        {{/animated-each}}
      </ul>
    {{/if}}
  </div>
</AnimatedContainer>
